import Editor from '@monaco-editor/react';
import { Typography, Container, Paper, Box, Tabs, Tab } from '@mui/material';
import React from 'react';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

const TabPanel = (props: TabPanelProps) => {
  const { children, value, index, ...other } = props;

  return (
    <div role="tabpanel" hidden={value !== index} {...other}>
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
    </div>
  );
};

const ReactBasics: React.FC = () => {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  const jsxExample = `// JSX语法示例
import React from 'react';

// 基本JSX语法
const element = <h1>Hello, World!</h1>;

// 在JSX中使用JavaScript表达式
const name = "张三";
const greeting = <h1>你好, {name}!</h1>;

// JSX属性
const image = <img src={user.avatarUrl} alt="用户头像" />;

// JSX中的子元素
const container = (
  <div>
    <h1>标题</h1>
    <p>这是一个段落</p>
  </div>
);

// JSX防止注入攻击
const userInput = response.potentiallyMaliciousInput;
const safeElement = <p>{userInput}</p>;  // React会自动转义

// JSX表示对象
const button = (
  <button className="btn" onClick={handleClick}>
    点击我
  </button>
);

// 等价的React.createElement()调用
const button2 = React.createElement(
  'button',
  { className: 'btn', onClick: handleClick },
  '点击我'
);`;

  const componentExample = `// 组件示例
import React, { useState } from 'react';

// 函数组件
function Welcome(props) {
  return <h1>你好, {props.name}</h1>;
}

// 使用箭头函数定义组件
const Button = ({ onClick, children }) => (
  <button onClick={onClick}>
    {children}
  </button>
);

// 使用State的组件
function Counter() {
  // 声明一个state变量和更新函数
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}

// 组件组合
function App() {
  return (
    <div>
      <Welcome name="张三" />
      <Counter />
      <Button onClick={() => alert('点击了按钮')}>
        自定义按钮
      </Button>
    </div>
  );
}`;

  return (
    <Container maxWidth="lg">
      <Box sx={{ mt: 4, mb: 4 }}>
        <Typography variant="h4" gutterBottom>
          React基础
        </Typography>
        <Typography variant="body1" paragraph>
          React是一个用于构建用户界面的JavaScript库。让我们从React的核心概念开始学习。
        </Typography>
      </Box>

      <Paper sx={{ width: '100%' }}>
        <Tabs value={value} onChange={handleChange} indicatorColor="primary" textColor="primary">
          <Tab label="JSX语法" />
          <Tab label="组件" />
        </Tabs>

        <TabPanel value={value} index={0}>
          <Typography variant="h6" gutterBottom>
            JSX语法
          </Typography>
          <Typography paragraph>
            JSX是JavaScript的语法扩展，它允许你在JavaScript代码中编写类似HTML的代码。
            以下是一些JSX的基本用法：
          </Typography>
          <Box sx={{ mt: 2, mb: 2 }}>
            <Editor
              height="500px"
              defaultLanguage="javascript"
              defaultValue={jsxExample}
              options={{
                readOnly: true,
                minimap: { enabled: false },
              }}
            />
          </Box>
          <Typography variant="body2" color="text.secondary">
            JSX虽然看起来像HTML，但它实际上更接近JavaScript。
            React会将JSX转换为React.createElement()调用。
          </Typography>
        </TabPanel>

        <TabPanel value={value} index={1}>
          <Typography variant="h6" gutterBottom>
            React组件
          </Typography>
          <Typography paragraph>
            组件是React应用的核心。组件允许你将UI拆分为独立的、可重用的部分。
            React组件本质上是返回React元素的JavaScript函数或类。
          </Typography>
          <Box sx={{ mt: 2, mb: 2 }}>
            <Editor
              height="500px"
              defaultLanguage="javascript"
              defaultValue={componentExample}
              options={{
                readOnly: true,
                minimap: { enabled: false },
              }}
            />
          </Box>
          <Typography variant="body2" color="text.secondary">
            现代React开发主要使用函数组件和Hooks。类组件虽然仍然支持，
            但在新项目中建议使用函数组件。
          </Typography>
        </TabPanel>
      </Paper>
    </Container>
  );
};

export default ReactBasics;
